<html>
	<head>
		<!-- Update title -->
		<title>Graphics in Cinder</title>

		<!-- keywords used for searching -->
		<meta name="keywords" content="guide, graphics">

   		<!-- <ci seealso dox="[CLASS NAME GOES HERE]" label="[NAME OF LINK]"></ci> -->

   		<!-- master stylesheet - these links will be replaced when compiled -->
		<link rel="stylesheet" href="../../_assets/css/foundation.css">
		<link rel="stylesheet" href="../../_assets/css/prism.css">
		<link rel="stylesheet" href="../../_assets/css/style.css">
		<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>

		<!-- Place additional stylsheet links here, which will be copied over when compiled (optional) -->
		
	</head>

	<body id="guide-contents" >

		<!-- CONTENT STARTS HERE -->
		<h1>Graphics in Cinder</h1>
		<section>
			<p>Cinder exposes a number of different graphics API's, each with different purposes. This guide serves as a starting point for these various technologies.</p>
		</section>

		<section>
			<h2>Core Technologies</h2>
			<ul>
				<li><strong>OpenGL</strong> - Cinder's most commonly used graphics API, used for high-performance, GPU-accelerated graphics. See <a href="../opengl/index.html">OpenGL in Cinder</a>.</li>
				<li><strong>Raster Images</strong> - for CPU-based image processing and I/O. Most commonly used through <ci>ci::Surface</ci>, <ci>ci::Channel</ci> and the <ci dox = "ci::ip">ci::ip namespace</ci>.</li>
				<li><strong>Cairo</strong> - most suitable for vector graphics (such as SVG rendering). Primarily CPU-based.</li>
			</ul>
		</section>


		<section>
			<h2>GPU vs. Raster vs. Vector</h2>
			<img class="center" src="threeup.png" />
			<p>Many tasks can be accomplished with any of these API's. However they each have different strengths with respect to performance and simplicity. We'll attempt a summary below of what can be a complex topic in practice.</p>
	
			<p>OpenGL (and similar technologies) are primarily based on rendering triangles, applying a shader to each pixel of a triangle. This is performed on the specialized hardware of the GPU, rather than the CPU your C++ application code runs on. To make use of either geometric or image data, we must incur a performance cost to upload this data from the CPU to the GPU. Furthermore, OpenGL does not make it simple to manipulate pixels directly in general. Additionally, triangle rasterization is not ideal for curved shapes, as it requires many triangles to create the illusion of curvature. However, GPUs often make all these costs worth our while, in both the 2D and 3D cases. The ability to render triangles extremely quickly is what makes just about all modern realtime graphics possible.</p>
	
			<p>Raster (or pixel-based) graphics excel in manipulating pixels, either individually or through broad-strokes operations like blurs. It's straightforward to write C++ code that manipulates pixels in this manner. However these operations can be substantially slower than the GPU equivalents. Additionally, rendering either 2D or 3D shapes with these APIs can be prohibitively complex. In Cinder, this API is expressed primarily through the <ci>Surface</ci> and <ci>Channel</ci> classes, as well as the image processing operations in the <ci>ci::ip</ci> namespace.</p>
	
			<p>Vector graphics express primarily 2D shapes as combinations of lines and B&eacute;zier curves. They're most commonly associated with print, but are useful in any context in which resolution-independence is important. Cinder provides a wrapper around <a href="http://cairographics.org/">Cairo</a> - an industry-standard graphics library specifically designed for vector graphics. In order to be useful, these mathematical descriptions of shapes must be converted to pixels (rasterized), which Cairo is designed to do. Users used to the performance of hardware-accelerated OpenGL are often surprised at how much more costly CPU-based rasterization often is. As an aside, it is also possible to output these vector-based scenes using formats like PDF or SVG using Cairo. Cinder provides classes relevant for manipulating vector shapes, namely <ci>ci::Shape2d</ci>, <ci>ci::Path2d</ci> and <ci>ci::PolyLineT</ci>. Cinder also provides an SVG parser that works independently of Cairo.</p>
		</section>

		<section>
			<h2>Combining Graphics</h2>
			<p>It's often desirable to combine these APIs as well. Briefly, both <ci>ci::Surface</ci> and <ci>ci::Channel</ci> can be used to create images for OpenGL (called textures). Cairo can also rasterize images to <ci>ci::Surface</ci>, which can optionally be used to create an OpenGL texture. Finally, a <ci>ci::Surface</ci> can be used in various Cairo contexts such as the creation of a <ci>cairo::Pattern</ci>.</p>
		</section>

		<!-- Scripts -->
		<script src="../../_assets/js/prism.js" type="text/javascript"></script>

	</body>
</html> 